<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['物料跟踪管理','基础信息维护','BOM编码管理']" icon="fa-lg fa-fw fa fa-cubes"
			class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2>BOM编码管理</h2>
				</header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn">
								<div class="top_module cancle">
									<span class="module_text">BOM编码</span>
									<input type="text" class="module_inp top_module_select ng-pristine ng-valid ng-touched" placeholder="BOM编码" [(ngModel)]='bomNumber'>
									<div class="s_del_icon" (click)='delKey("bomNumber")'>x</div>
								</div>
								<div class="top_module cancle">
									<span class="module_text">录入人</span>
									<input type="text" class="module_inp top_module_select ng-pristine ng-valid ng-touched" placeholder="录入人" [(ngModel)]='enterMan'>
									<div class="s_del_icon" (click)='delKey("enterMan")'>x</div>
								</div>
								<div class="selectDate top_module">
									<table-select-date [notInit]='true' (outerTime)="datePickerSelected($event)" ></table-select-date>
								</div>
								<button  type="button"  class="btn btn-primary" (click)="tableSearch()">查询</button>
								<button type="button" class="btn btn-primary"
									(click)="addBomCode(addBomCodeModal)">添加BOM编码</button>
								<button type="button" class="btn btn-primary"
									(click)="showImportModal(weightModal)">导入Excel文件</button>
							</div>
						</div>
						<div class="table_scroll">
							<table
								class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
								<thead>
									<tr>
										<th>BOM编码</th>
										<th>描述</th>
										<th>物料组合</th>
										<th>录入人</th>
										<th>录入时间</th>
										<th>更新时间</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<tr *ngFor="let row of tableData"
										[ngClass]='{selected: activeSelected === row.id }'(dblclick)="detail_domCode(row,row.id,BomCodeDetail)">
										<td>{{row.bomNumber}}</td>
										<td>{{row.describe}}</td>
										<td [title]="row.str">{{row.sortstr}}</td>
										<td>{{row.enterMan}}</td>
										<td>{{row.enterTime}}</td>
										<td>{{row.updateTime}}</td>
										<td>
											<button type="button"
												(click)="detail_domCode(row,row.id,BomCodeDetail)">查看</button>
											<button type="button"
											(click)="editBomCode(row,addBomCodeModal)">编辑</button>
											<button type="button" (click)="del_domCode(row)">删除</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="table-fix clearfix">
							<paginator [totalRecords]="totalCounts" [rows]="pageSize" [currentPage]="curPage - 1"
								(onPageChange)="paginate($event)">
							</paginator>
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i
									class="fa fa-refresh"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</sa-widgets-grid>
</div>
<!-- 添加BOM编码 -->
<section bsModal #addBomCodeModal="bs-modal" id="addBomCodeModal" class="modal bomCodeDetail fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog modal-lg" style="width: 628px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" (click)="closeAddBomModal(addBomCodeModal)" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">{{bomTitle}}</h4>
			</div>
			<div class="modal-body">
				<div class="row form-horizontal">
					<div class="form-group clearfix">
						<label class="control-label col-xs-2 no-padding-right">BOM编码<sup>*</sup></label>
						<div class="col-xs-9">
							<div class="clearfix">
								<!-- 这里的对象就是要添加往后台传的 -->
								<input class="form-control" name="sensorAmount" autocomplete="off" type="text" [(ngModel)]='page.bomCode'
									placeholder="BOM编码" />
							</div>
						</div>
					</div>
					<div class="form-group clearfix">
						<label class="control-label col-xs-2 no-padding-right">描述<sup>*</sup></label>
						<div class="col-xs-9">
							<div class="clearfix">
								<!-- 这里的对象就是要添加往后台传的 -->
								<input class="form-control" name="sensorAmount" autocomplete="off" type="text" [(ngModel)]='page.desc'
									placeholder="填写BOM编码描述" />
							</div>
						</div>
					</div>
					<div style="border-top: 1px solid #ccc;" class="mainWrap">
						<div class="clearfix" style="position: relative;">
							<span class="el-checkbox__inner" [ngClass]="{'is-checked':masterList.selected}"
								(click)="checkboxClick('master')"></span>
							<!-- 有边框 -->
							<div class="materialWrap">
								<!-- 一整条数据 遍历的-->
								<div class="materialLi" *ngFor="let master of masterArr;let i=index;">
									<label class="control-label col-xs-2 no-padding-right" style="text-align: right;padding-top: 6px;">主机</label>
									<div class="col-xs-6">
										<div class="clearfix s_fix_select2">
											<select class="form-control nameSelect"
												(change)="nameChange($event.target.value,'master',i)"
												[value]="master.index||master.index==0?master.index:''"
												style="width: 100%">
												<option value="">请选择</option>
												<option *ngFor="let item of nameList.host;let j = index;" [value]='j'>
													{{item.productName}} &nbsp;({{item.materielNumber}})</option>
											</select>
										</div>
									</div>
									<div class="col-xs-2" style="margin-left:10px">
										<div class="clearfix numWrap">
											<span class="reduce"><i  (click)="reduceNum($event.target,'master',i)" class="fa fa-minus" aria-hidden="true"></i></span>
											<!-- 小的数量框 -->
											<input class="form-control" autocomplete="off" name="sensorAmount" type="text" placeholder="数量"
												(change)="numChange($event.target.value,'master',i)" [value]="master.num?master.num:''"/>
											<span class="add"><i (click)="addNum($event.target,'master',i)" class="fa fa-plus" aria-hidden="true"></i></span>
										</div>
									</div>
									<span class="addBtn" *ngIf="i==0" (click)="addMaterial(1)"><i class="fa fa-plus"
											aria-hidden="true"></i> </span>
									<span *ngIf="i>0" class="addBtn" (click)="deleteMaterial(1,i)"><i
											class="fa fa-minus" aria-hidden="true"></i>
									</span>
								</div>
							</div>
						</div>
						<div class="clearfix" style="position: relative;">
							<span class="el-checkbox__inner" [ngClass]="{'is-checked':sensorList.selected}"
								(click)="checkboxClick('sensor')"></span>
							<!-- 有边框 -->
							<div class="materialWrap">
								<!-- 一整条数据 遍历的-->
								<div class="materialLi" *ngFor="let sensor of sensorArr;let i=index;">
									<label class="control-label col-xs-2 no-padding-right"  style="text-align: right;padding-top: 6px;">传感器</label>
									<div class="col-xs-6">
										<div class="clearfix s_fix_select2">
											<select class="form-control nameSelect"
												(change)="nameChange($event.target.value,'sensor',i)"
												[value]="sensor.index||sensor.index==0?sensor.index:''"
												style="width: 100%">
												<option value="">请选择</option>
												<option *ngFor="let item of nameList.sensor;let j = index;" [value]='j'>
													{{item.productName}} &nbsp;({{item.materielNumber}})
												</option>
											</select>
										</div>
									</div>
									<div class="col-xs-2" style="margin-left:10px">
										<div class="clearfix numWrap">
											<span class="reduce"><i (click)="reduceNum($event.target,'sensor',i)" class="fa fa-minus" aria-hidden="true"></i></span>
											<!-- 小的数量框 -->
											<input class="form-control" name="sensorAmount" type="text" autocomplete="off"
												(change)="numChange($event.target.value,'sensor',i)" placeholder="数量" [value]="sensor.num?sensor.num:''"/>
											<span class="add"><i  (click)="addNum($event.target,'sensor',i)" class="fa fa-plus"  aria-hidden="true"></i></span>
										</div>
									</div>
									<span class="addBtn" *ngIf="i==0" (click)="addMaterial(2)"><i class="fa fa-plus"
											aria-hidden="true"></i> </span>
									<span *ngIf="i>0" class="addBtn" (click)="deleteMaterial(2,i)"><i
											class="fa fa-minus" aria-hidden="true"></i>
									</span>
								</div>
							</div>
						</div>
						<div class="clearfix" style="position: relative;">
							<span class="el-checkbox__inner" [ngClass]="{'is-checked':wireList.selected}"
								(click)="checkboxClick('wire')"></span>
							<!-- 有边框 -->
							<div class="materialWrap" style="border-bottom: none;">
								<!-- 一整条数据 遍历的-->
								<div class="materialLi" *ngFor="let wire of wireArr;let i=index;">
									<label class="control-label col-xs-2 no-padding-right"  style="text-align: right;padding-top: 6px;">线材</label>
									<div class="col-xs-6">
										<div class="clearfix s_fix_select2">
											<select class="form-control nameSelect"
												(change)="nameChange($event.target.value,'wire',i)" [value]="wire.index||wire.index==0?wire.index:''" style="width: 100%">
												<option value="">请选择</option>
												<option *ngFor="let item of nameList.wire;let j = index;" [value]='j'>
													{{item.productName}} &nbsp;({{item.materielNumber}})</option>
											</select>
										</div>
									</div>
									<div class="col-xs-2" style="margin-left:10px">
										<div class="clearfix numWrap">
											<span class="reduce"><i (click)="reduceNum($event.target,'wire',i)" class="fa fa-minus" aria-hidden="true"></i></span>
											<!-- 小的数量框 -->
											<input class="form-control" name="sensorAmount" type="text" autocomplete="off"
												(change)="numChange($event.target.value,'wire',i)" placeholder="数量"  [value]="wire.num?wire.num:''"/>
											<span class="add"><i  (click)="addNum($event.target,'wire',i)" class="fa fa-plus" aria-hidden="true"></i></span>
										</div>
									</div>
									<span class="addBtn" *ngIf="i==0" (click)="addMaterial(3)"><i class="fa fa-plus"
											aria-hidden="true"></i> </span>
									<span *ngIf="i>0" class="addBtn" (click)="deleteMaterial(3,i)"><i
											class="fa fa-minus" aria-hidden="true"></i>
									</span>
								</div>
							</div>
						</div>
						<!-- <div class="form-group clearfix">
								<label class="control-label col-sm-2 no-padding-right">名称</label>
								<div class="col-sm-9">
									<div class="clearfix">
										<select class="form-control" name="materialName" (change)="nameChange($event.target.value)" style="width: 100%">
											<option value="">请选择</option>
											<option *ngFor="let item of nameList" [value]='item.value'>{{item.label}}</option>
										</select>
									</div>
								</div>
							</div>
							<div class="form-group clearfix">
								<label class="control-label col-sm-2 no-padding-right">数量</label>
								<div class="col-sm-9">
									<div class="clearfix">
										
										<input class="form-control" name="sensorAmount" type="text" [(ngModel)]='page.desc' placeholder="填写BOM编码描述" />
									</div>
								</div>
							</div> -->
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" (click)="closeAddBomModal(addBomCodeModal)">取消</button>
				<button type="button" class="btn btn-primary" (click)="submitModal(addBomCodeModal)">{{bomBtn}}</button>
			</div>
		</div>
	</div>
</section>
<!-- 添加BOM编码  结束 -->

<!-- BOM编码详情弹框 -->
<div bsModal #BomCodeDetail="bs-modal" id="BomCodeDetail" class="modal bomCodeDetail fade" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog modal-lg" style="width: 900px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" (click)="closeDetailModal(BomCodeDetail)" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">物料组合</h4>
			</div>
			<div class="modal-body">

				<div style="padding-bottom:10px;">
					<div class="bomTitleWrap">
						<h3 class="col-sm-2">BOM编码: </h3>
						<span style="margin-bottom: 10px;" class="col-sm-9">{{BomCodeInfo.bomNumber||'--'}}</span>
					</div>
					<div class="bomTitleWrap">
						<h3 class="col-sm-2">描 述: </h3>
						<span class="col-sm-9">{{BomCodeInfo.describe||'--'}}</span>
					</div>
				</div>
				<div class="border"></div>
				<div class="infoWrap">
					<div class="table_scroll">
						<table
							class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
							<thead>
								<tr>
									<th>类型</th>
									<th>物料编码</th>
									<th>名称</th>
									<th>数量</th>
								</tr>
							</thead>
							<tbody>
								<tr *ngFor="let row of BomCodeInfo.materielList">
									<td>{{row.materielTypeStr?row.materielTypeStr:"--"}}</td>
									<td>{{row.materielNumber}}</td>
									<td>{{row.productName}}</td>
									<td style="text-align: center">{{row.num}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- BOM编码详情  结束 -->

<!-- 导入弹框 -->
<div bsModal #weightModal="bs-modal"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
	aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" (click)="cancelUp(weightModal)" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">上传Excel文件</h4>
			</div>
			<div class="modal-body">

				<div class="row">
					<form class="form form-inline " role="form">

						<!-- <div class="row" style="margin-bottom: 24px;">
							<div class="form-group module_line">
								<button type="button" class="btn btn-primary" (click)="load_module()">下载模板</button>
								<span class="row" class="note">注：请先下载模板，采用模板编辑文件后上传</span>
							</div>
						</div> -->


						<div class="row">
							<!--<label class="control-label col-sm-1" for="imgFile" style="padding: 0;display: inline-block;line-height: 32px;">文件</label>-->
							<div class="col-sm-10" style="padding: 0;">
								<div class="clearfix module_line">
									<button type="button" class="btn btn-primary" style="width: 120px;">上传模板文件
										<input type="file" class="up" (change)="fileChange($event.target.files)"
											name="fileToUpload" (click)='clearFile()' [(ngModel)]='fileUp'
											placeholder='' multiple="multiple"/>
									</button>
									<span class="row" class="note">注：可一次性添加多份文件, 格式excel</span>
								</div>
							</div>
						</div>
						<div *ngIf="fileToUpload.length>0">
							<label class="control-label col-sm-1"></label>
							<div>
								<ul style="max-height: 321px;overflow-y: auto;">
									<li class="file_list" *ngFor="let file of fileToUpload"><i class="fa fa-file-text-o"
											style="margin-right: 12px;"></i>{{file.name}}<i
											class="fa fa-check-circle green" style="margin-left: 60px;"></i></li>
								</ul>
							</div>
						</div>
					</form>
				</div>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" (click)="cancelUp(weightModal)">取消</button>
				<button type="button" class="btn btn-primary" (click)="submitData(weightModal)">确认</button>
			</div>
		</div>
	</div>
</div>
<!-- 导入弹框 结束 -->